<template>
  <van-form ref="form" class="form" label-width="0" @submit="onSubmit">
    <form-field>
      <van-field
        v-model="form.password"
        :type="!showPassword ? 'password' : 'text'"
        name="password"
        placeholder="请输入新密码（至少8位，首字母+数字）"
        :rules="rules.password"
        @click-right-icon="showPassword = !showPassword"
      >
        <template #right-icon>
          <i class="password-icon" :class="{ 'password-icon--show': showPassword }" />
        </template>
      </van-field>
    </form-field>
    <form-field>
      <van-field
        v-model="form.newPassword"
        type="password"
        name="newPassword"
        placeholder="请确认新密码"
        :rules="rules.newPassword"
      />
    </form-field>
    <!---->
    <van-button class="form-submit" round block type="info" native-type="submit">确定</van-button>
  </van-form>
</template>

<script>
  import { mapGetters } from 'vuex';
  import FormField from '@views/login/components/form-field';
  import { getUrlParams } from '@utils/util';
  import { resetPassword } from '@api/login';

  export default {
    components: { FormField },
    data() {
      return {
        form: {
          password: '',
          newPassword: ''
        },
        rules: {
          password: [
            { required: true, message: '请填写密码' },
            {
              required: true,
              message: '格式不正确',
              trigger: 'obBlur',
              pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/
            }
          ],
          newPassword: [{ required: true, message: '请确认新密码' }]
        },
        showPassword: false
      };
    },
    computed: mapGetters('user', ['userWx']),
    methods: {
      onSubmit() {
        let { placeUserId } = this.userWx;
        placeUserId = placeUserId || undefined;
        const { placeId, mobile, smsCode } = getUrlParams();
        const { password, newPassword } = this.form;

        if (password !== newPassword) return this.$toast('两次输入的密码不一致！');

        const loading = this.$toast.loading('加载中...');

        resetPassword({ mobile, smsCode, newPassword, placeId, placeUserId })
          .then(({ success, msg }) => {
            if (!success) return this.$toast(msg);

            this.$emit('success', msg);
          })
          .finally(() => loading.clearLoading());
      }
    }
  };
</script>

<style scoped lang="less">
  .password-icon {
    display: inline-block;
    width: 19px;
    height: 19px;
    vertical-align: middle;
    background: url('~@assets/images/login/icon/eye-hide@2x.png') no-repeat center center/cover;

    &--show {
      background-image: url('~@assets/images/login/icon/eye@2x.png');
    }
  }

  .form {
    padding: 40px 20px 0;

    .field-item {
      &:not(:first-child) {
        margin-top: 15px;
      }
    }

    .van-cell {
      padding-right: 0;
      padding-left: 0;
    }

    .captcha-btn {
      width: 52px;
      height: 24px;
      font-size: 13px;
      color: #5ccc2b;
      vertical-align: top;
    }
  }

  .form-submit {
    width: 335px;
    height: 48px;
    margin: 42px auto;
    font-size: 17px;
    background: linear-gradient(-90deg, rgba(47, 225, 183, 1) 0%, rgba(40, 215, 228, 1) 99%);
    border: none;
    border-radius: 24px;
  }
</style>
